<template>
	<view class="container">
		<!-- 文章或者电子书 -->
		<view class="carousel" v-if="resource.resourceType == '1'||resource.resourceType == '4'">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item">
					<view class="image-wrapper">
						<image :src="resource.coverImageUrl" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 音频 -->
		<view class="audio-wrapper" v-if="resource.resourceType == '2' && resource.subResourceList.length>0">
			<custom-audio :list="resource.subResourceList" :index="currentPlaying" :autoPlay="false" :autoNext="true" :slideWithPlay="true" :switchWithPlay="true"  @indexChange="indexChanged"></custom-audio>
		</view>
		<!-- 视频 -->
		<view class="video-wrapper" v-if="resource.resourceType == '3' && resource.subResourceList.length>0">
			<custom-video :list="resource.subResourceList" :index="currentPlaying" :autoPlay="false" :autoNext="true" :slideWithPlay="true" :switchWithPlay="true"  @indexChange="indexChanged"></custom-video>
		</view>
		<view class="content">
			<view id="nav-bar" class="nav-bar">
				<view v-for="(item,index) in tabBars" :key="item.value" class="nav-item"
					:class="{current: index === tabCurrentIndex}" :id="'tab'+index" @click="changeTab(index)">
					{{item.name}}
				</view>
			</view>
			<swiper class="swiper-box" :style="{height: swiperHeight+'px'}" :duration="300" :current="tabCurrentIndex" @change="changeTab">
				<swiper-item>
					<view class="swiper-item-0">
						<view class="card">
							<view class="title-section">
								<view class="name">
									<view class="t">
										{{resource.resourceName||''}}
									</view>
									<view class="share"
										@click="togglePopup('bottom', 'share')">
										<text class="iconfont icon-share">分享</text>
									</view>
									<view class="fav" v-if="resourceFavorited"
										@click="cancelFavoriteResource(userInfo.userUuid, resource.resourceUuid)">
										<text class="iconfont icon-favorites-fill">已收藏</text>
									</view>
									<view class="fav" v-else>
										<text class="iconfont icon-favorites"
											@click="favoriteResource(userInfo.userUuid, resource.resourceUuid)">收藏</text>
									</view>
								</view>
								<view class="unit">
									<view class="t">
									阅读{{resource.numberOfReading||0}}次 | 共{{resource.subResourceUnit||0}}篇
									</view>
								</view>
								<view class="bottom">
									<view class="level" v-if="item.accessEnabled"
										v-for="(item,index) in resource.accessList">
										{{item.userLevelDTO.name||''}}
									</view>
									<view class="price" v-if="resource.purchaseEnabled">单购￥{{resource.salePrice||0.00}}
									</view>
								</view>

							</view>
							<view class="author-section" v-if="resource.resourceAuthorDTO">
								<view class="name">作者({{resource.resourceAuthorDTO.authorName||''}})简介</view>
								<view class="intro">{{resource.resourceAuthorDTO.authorIntroduction||''}}</view>
							</view>
							<view class="author-section">
								<view class="name">摘要</view>
								<view class="intro">{{resource.digest||''}}</view>
							</view>

						</view>

					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item-1 sub-resource-wrapper">
						<view class="sub-item" :class="{'active': index===currentPlaying}"  v-for="(item, index) in resource.subResourceList" @click="view(item,index)">
							<view class="index">
								{{index+1}}
							</view>
							<view class="content">
								<view class="name">
									{{item.subName}}
								</view>

								<view v-if="item.auditionEnabled">
									<view class="tag" v-if="resource.resourceType==='1'">免费试读</view>
									<view class="tag" v-if="resource.resourceType==='2'">免费试听</view>
									<view class="tag" v-if="resource.resourceType==='3'">免费试看</view>
									<view class="tag" v-if="resource.resourceType==='4'">免费试读</view>
								</view>
							</view>
							<view class="action">
								<span class="iconfont icon-preview" v-if="resource.resourceType==='1'"></span>
								<span class="iconfont icon-audio" v-if="resource.resourceType==='2'"></span>
								<span class="iconfont icon-video" v-if="resource.resourceType==='3'"></span>
								<span class="iconfont icon-ebook" v-if="resource.resourceType==='4'"></span>
							</view>

						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item-2">
						<view class="card eva-section">
							<view class="e-header">
								<text class="tit">评论</text>
								<text>({{totalComment}})</text>
								<text class="tip" @click="navTo('/pages/resource/evaluate-list?id='+id)">查看全部</text>
								<text class="iconfont icon-right"></text>
							</view>
							<view class="" v-for="comment in commentList">
								<view class="eva-box">
									<image class="portrait"
										:src="comment.userDTO.photoUrl||'/static/image/missing-face.png'"
										mode="aspectFill"></image>
									<view class="right">
										<view class="bot">
											<text class="attr">{{comment.userDTO.name}}</text>
											<text class="time">{{comment.evaluateTime}}</text>
										</view>
										<view class="star">
											<image src="../../static/image/redstar.png" mode=""
												v-if="i<comment.commentRank" v-for="(item,i) in stars"></image>
										</view>
										<text class="con">{{comment.commentContent||''}}</text>
									</view>
								</view>
								<view class="eva-reply" v-if="comment.replayContent">
									<text>回复: {{comment.replayContent}}</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view class="action-btn-group" v-if="!resource.accessable">
				<button type="primary" class=" action-btn no-border buy-now-btn"
					@click="buy">单独购买(￥{{resource.salePrice||0.00}})</button>
				<span class="seperator">|</span>
				<button type="primary" class=" action-btn no-border upgrade-btn"
					@click="upgrade">开通会员(低至0.15元/天)</button>
			</view>
		</view>



		<!-- 底部分享弹窗 -->
		<uni-popup ref="showshare" :type="type" @change="change">
			<!-- #ifdef H5 -->
			<shareByH5 :shareType='3' :goodsId="resource.resourceUuid" :shareImg="resource.coverImageUrl"
				:shareTitle="resource.resourceName" :shareContent="resource.digest" :shareHref="shareHref"
				@close="closeShare()"></shareByH5>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<shareByWx :shareType='3' :goodsId="resource.resourceUuid" :shareImg="resource.coverImageUrl"
				:shareTitle="resource.resourceName" :shareContent="resource.digest"
				:shareHref="'/pages/resource/resource-detail?id='+resource.resourceUuid" @close="closeShare()">
			</shareByWx>
			<!-- #endif -->

			<!-- #ifdef MP-ALIPAY -->
			<shareByAli :shareType='3' :goodsId="resource.resourceUuid" :shareImg="resource.coverImageUrl"
				:shareTitle="resource.resourceName" :shareContent="resource.digest" :shareHref="shareHref"
				@close="closeShare()"></shareByAli>
			<!-- #endif -->

			<!-- #ifdef APP-PLUS -->
			<shareByApp :shareType='3' :goodsId="resource.resourceUuid" :shareImg="resource.coverImageUrl"
				:shareTitle="resource.resourceName" :shareContent="resource.digest" :shareHref="shareHref"
				@close="closeShare()"></shareByApp>
			<!-- #endif -->
		</uni-popup>
		<!-- 底部商品参数弹窗 -->
	</view>
</template>

<script>
	// import share from '@/components/share';
	import uniNumberBox from '@/components/uni-number-box.vue'
	import uniBadge from "@/components/uni-badge/uni-badge.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import customAudio from '@/components/custom-audio-play.vue'
	import customVideo from '@/components/custom-video-play.vue'
	// #ifdef H5
	import shareByH5 from '@/components/share/shareByh5.vue'
	// #endif
	// #ifdef MP-WEIXIN
	import shareByWx from '@/components/share/shareByWx.vue'
	// #endif
	// #ifdef MP-ALIPAY
	import shareByAli from '@/components/share/shareByAli.vue'
	// #endif
	// #ifdef APP-PLUS
	import shareByApp from '@/components/share/shareByApp.vue'
	// #endif
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniNumberBox,
			uniBadge,
			uniPopup,
			customAudio,
			customVideo,
			// #ifdef H5
			shareByH5,
			// #endif

			// #ifdef MP-WEIXIN
			shareByWx,
			// #endif

			// #ifdef MP-ALIPAY
			shareByAli,
			// #endif

			// #ifdef APP-PLUS
			shareByApp,
			// #endif
		},
		data() {
			return {
				id: '',
				showCoupon: false,
				coupons: [],
				resource: {
					resourceAuthorDTO: {

					}
				},
				tabBars: [{
					name: '简介'
				}, {
					name: '内容列表'
				}, {
					name: '评论'
				}],
				swiperHeight:0,	//swiper动态高度
				tabCurrentIndex: 0,
				currentPlaying: '',	//当前播放的子资源
				resourceFavorited: false,
				type: '',
				commentList: [],
				totalComment: 0,
				stars: [0, 0, 0, 0, 0]
			};
		},
		onLoad(options) {
			let id = options.id || decodeURIComponent(options.scene);
			if (id) {
				this.id = id;
				this.inquiryResource(id);
				//是否收藏
				if (this.hasLogin) {
					this.isResourceFavorited(this.userInfo.userUuid, id);
				}
				//商品评论
				this.searchResourceComment(id);

			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			shareHref() {
				let pages = getCurrentPages()
				let page = pages[pages.length - 1]
				// #ifdef H5 || MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE
				return this.$api.request.apiBaseUrl.replace("/cvc/rest/", "") + '/#/' + page.route + '?id=' + this.resource
					.resourceUuid;
				// #endif

				// #ifdef MP-ALIPAY
				return this.$api.request.apiBaseUrl.replace("/cvc/rest/", "") + '/#/' + page.__proto__.route + '?id=' +
					this.resource.resourceUuid;
				// #endif
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.resource.resourceName,
				imageUrl: this.resource.coverImageUrl,
				path: '/pages/resource/resource-detail?id=' + this.resource.resourceUuid
			}
		},
		methods: {
			...mapMutations(['login', 'addFootPrint']),
			togglePopup(type, open) {
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			closeShare() {
				this.$refs.showshare.close();
			},
			closeAttr() {
				this.$refs.showattr.close();
			},
			cancel(type) {
				this.$refs.showshare.close();
			},
			change(e) {
				console.log('是否打开:' + e.show)
			},
			changeTab(e) {
				if (typeof e === 'number') {
					//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
					this.tabCurrentIndex = e;
				}
				//e=number为点击切换，e=object为swiper滑动切换
				else if (typeof e === 'object') {
					this.tabCurrentIndex = e.detail.current
				}
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			/* 动态设置siper的高度, swiper组件是固定高度, 如果在swiper-item里面使用scroll-view, 又会造成页面有两个滚动盒,造成用户体验不好 */
			setSwiperHeight(){
				let that = this;
				let element = '.swiper-item-'+this.tabCurrentIndex;
				let query = uni.createSelectorQuery().in(that);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					if(res && res[0] && res[0][0]) {
						that.swiperHeight = res[0][0].height;
					}
				});
			},
			isResourceFavorited(userUuid, resourceUuid) {
				let postData = {
					resourceDTO: {
						resourceUuid: resourceUuid
					},
					userDTO: {
						userUuid: userUuid
					}
				}
				this.$api.request.isResourceFavorited(postData, res => {
					if (res.body.status.statusCode === '0') {
						this.resourceFavorited = res.body.data.resourceFavorited;
					} else {
						this.$api.msg(res.body.status.errorDesc);
					}
				}, true);
			},
			favoriteResource(userUuid, resourceUuid) {
				this.resourceFavorited = true;
				let postData = {
					resourceDTO: {
						resourceUuid: resourceUuid
					},
					userDTO: {
						userUuid: userUuid
					}
				}
				this.$api.request.favoriteResource(postData, res => {
					if (res.body.status.statusCode === '0') {
						console.log('已收藏');
					} else {
						this.$api.msg(res.body.status.errorDesc);
					}
				}, true);
			},
			cancelFavoriteResource(userUuid, resourceUuid) {
				this.resourceFavorited = false;
				let postData = {
					resourceDTO: {
						resourceUuid: resourceUuid
					},
					userDTO: {
						userUuid: userUuid
					}
				}
				this.$api.request.cancelFavoriteResource(postData, res => {
					if (res.body.status.statusCode === '0') {
						console.log('已取消收藏');
					} else {
						this.$api.msg(res.body.status.errorDesc);
					}
				}, true);
			},
			inquiryResource(id) {
				let postData = {
					resourceUuid: id
				}
				this.$api.request.inquiryResource(postData, res => {
					if (res.body.status.statusCode === '0') {
						this.resource = res.body.data;
						//如果是音视频, 自动播放
						if(this.resource.resourceType=='2'||this.resource.resourceType=='3'){
							this.currentPlaying = 0;
						}
						this.addFootPrint(this.resource);
					} else {
						console.log(res.body.status.errorDesc);
					}
					this.$nextTick(() => {
						this.setSwiperHeight();
					});
				});
			},
			searchResourceComment(id) {
				let postData = {
					keyArray: ['RESOURCEUUID'],
					resourceUuid: id,
					startIndex: 0,
					pageSize: 10 //默认显示10条, 点击查看全部可以获取所有评论
				}
				this.$api.request.searchResourceComment(postData, res => {
					if (res.body.status.statusCode === '0') {
						this.commentList = res.body.data.commentList;
						this.totalComment = res.body.data.total;
					} else {
						console.log(res.body.status.errorDesc);
					}
				});
			},
			view(item,index) {
				//文章
				if(this.resource.resourceType == '1'){
					if (this.resource.accessable || item.auditionEnabled) {
						//访问内容
						uni.navigateTo({
							url: '/pages/resource/view-sub-resource?id=' + item.resourceSubUuid
						})
					} else {
						//开通会员
						uni.navigateTo({
							url: '/pages/user/user-upgrade'
						})
					}
				}
				//音频
				else if(this.resource.resourceType == '2'){
					this.currentPlaying = index;
				}
				//视频
				else if(this.resource.resourceType == '3'){
					this.currentPlaying = index;
				}
				//电子书
				else if(this.resource.resourceType == '4'){
					if (this.resource.accessable || item.auditionEnabled) {
						//访问内容
						uni.navigateTo({
							url: '/pages/resource/view-sub-resource?id=' + item.resourceSubUuid
						})
					} else {
						//开通会员
						uni.navigateTo({
							url: '/pages/user/user-upgrade'
						})
					}
				}
			},
			indexChanged(data){
				this.currentPlaying = data;
			},

			//分享
			share() {
				this.$refs.share.toggleMask();
			},
			//收藏
			toFavorite() {
				if (!this.hasLogin)
					uni.navigateTo({
						url: '/pages/public/login'
					});
				else {
					this.resourceFavorited = !this.resourceFavorited;
					if (this.resourceFavorited) {
						this.favoriteResource(this.userInfo.userUuid, this.id);
					} else {
						this.cancelFavoriteResource(this.userInfo.userUuid, this.id);
					}
				}
			},

			upgrade() {
				uni.navigateTo({
					url: '/pages/user/user-upgrade'
				})
			},
			//立即购买
			buy() {
				let postData = {
					resourceDTO: {
						resourceUuid: this.id
					},
					userDTO: {
						userUuid: this.userInfo.userUuid
					}
				}
				this.$api.request.addResourceTran(postData, res => {
					if (res.body.status.statusCode === '0') {
						uni.redirectTo({
							url: '/pages/resource/pay-resource?tranCode=' + res.body.data.transactionCode
						})
					} else {
						this.$api.msg(res.body.status.errorDesc);
					}
				});
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			stopPrevent() {}
		},

	}
</script>

<style lang='scss'>
	page {
		background: $bg-color-light;
		padding-bottom: 160upx;
	}

	.content {
		margin: 0 $page-row-spacing;
	}


	.carousel {
		height: 500upx;
		width: 100%;
		position: relative;

		swiper {
			height: 100%;
			width: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.swiper-box {
		width: 100%;
		min-height:150px;
	}

	.panel-scroll-box {
		height: 100%;
	}

	.title-section {
		.name {
			color: $font-color-dark;
			font-weight: bold;
			font-size: $font-lg;
			display: flex;
			justify-content: start;
			.t{
				width: 50%;
			}
			.share{
				margin-left: auto;
				color: $font-color-base;
			}
			.fav {
				margin-left: auto;
				margin-right: 40upx;
				color: $font-color-base;

				.iconfont {
					font-size: $font-base;
				}

				.icon-favorites-fill {
					color: $bg-color-dark;
				}
				
				.icon-share {
					color: $bg-color-dark;
				}
			}
		}

		.unit {
			color: $font-color-light;
			font-size: $font-sm;
			margin-top: 20upx;
		}

		.bottom {
			display: flex;
			flex-direction: row;
			justify-content: start;
			margin-top: auto;
			align-items: center;
			margin-top: 20upx;

			.level {
				background: $bg-color-dark;
				opacity: .5;
				color: #fff;
				padding: 4upx;
				margin-right: 2upx;
				border-radius: 10upx;
				font-size: $font-sm - 6upx;
			}

			.price {
				color: $font-color-light;
				font-size: $font-sm;
				padding-left: 20upx;
			}

		}
	}

	.author-section {

		margin-top: 50upx;

		.name {
			color: $font-color-dark;
			font-weight: bold;
			font-size: $font-lg;
		}

		.intro {
			margin-top: 20upx;
			color: $font-color-light;
			font-size: $font-sm;
		}
	}

	.sub-resource-wrapper {
		margin-top: 40upx;
		height: 100%;
		width: 100%;

		.sub-item {
			display: flex;
			padding: 20upx;
			background: #fff;

			.index {
				width: 60upx;
				color: $font-base;
			}

			.content {
				.name {
					font-size: $font-base;
				}

				.tag {
					color: $bg-color-dark;
					font-size: $font-sm;
					border: .5px solid $bg-color-dark;
					padding: 5upx;
					margin-top: 10upx;
					width: 120upx;
					text-align: center;
				}
			}

			.action {
				margin-left: auto;

				.iconfont {
					font-size: $font-lg+4upx;
				}
			}

		}
		.active{
			color:#FFA929;
		}
	}

	.coupon-title {
		text-align: center;
		padding: 30upx 0;
		color: $font-color-dark;
	}

	/* 评价 */
	.eva-section {


		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;

			.star {
				display: flex;

				image {
					width: 40upx;
					height: 40upx;
				}
			}

			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}

	.eva-reply {
		color: $font-color-light;
		font-size: 28upx;
		padding: 10upx;
		border-radius: 20upx;
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}

			.disabled {
				background-color: $font-color-disabled;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		width: 100%;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100upx;
		border-radius: 16upx;

		.uni-badge {
			position: absolute;
			top: -0.1em;
			left: 7em;
			background: $uni-color-error;
			color: #fff;
		}


		.action-btn-group {
			display: flex;
			align-items: center;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			background: $bg-color-dark;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255, 255, 255, .5);
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}

			.buy-now-btn {
				width: 300upx;
			}
			.seperator{
				color: #fff;
			}
			.upgrade-btn {
				width: 360upx;
			}
		}

	}
</style>